<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>

<%
    String errorMessage;
    String successMessage;
    errorMessage = (String)request.getAttribute("errorMessage");
    successMessage = (String)request.getAttribute("successMessage");
%>
<% if (errorMessage!= null && !errorMessage.isEmpty()) { %>
<script>
    alert("error:" +  "<%= errorMessage %>");
</script>
<% }
    if(successMessage!= null && !successMessage.isEmpty()) {
%>

<script>
    alert("success:" +  "<%= successMessage %>");
</script>

<% } %>
<%
  if (session.getAttribute("user") == null) {
    response.sendRedirect("login.jsp");
  }

  Integer mode;

    if (request.getParameter("mode") == null) {
        mode = (Integer) request.getAttribute("mode");
        if(mode == null){
            mode = 0;
        }
    } else {
        mode = Integer.parseInt(request.getParameter("mode"));
    }

    if (mode < 0 || mode > 2) {
        mode = 0;
    }

    String itemButtonClassString, newItemButtonClassString, cartButtonClassString, itemImageStyle, newItemImageStyle, cartImageStyle;

    itemButtonClassString = mode == 0 ? "chosen-tabbar" : "unchosen-tabbar";
    newItemButtonClassString = mode == 1 ? "chosen-tabbar" : "unchosen-tabbar";
    cartButtonClassString = mode == 2 ? "chosen-tabbar" : "unchosen-tabbar";
    itemImageStyle = mode == 0 ? "opacity:1; transition: 0.8s" : "opacity:0; transition: 0.8s";
    newItemImageStyle = mode == 1 ? "opacity:1; transition: 0.8s" : "opacity:0; transition: 0.8s";
    cartImageStyle = mode == 2 ? "opacity:1; transition: 0.8s" : "opacity:0; transition: 0.8s";

%>


<%
  if (mode == 0) {
%>
<jsp:include page="userComponents/itemsStyle.jsp" />
<%
} else if (mode == 1) {
%>
<jsp:include page="userComponents/newItemStyle.jsp" />
<%
} else if (mode == 2) {
%>
<jsp:include page="userComponents/cartStyle.jsp" />
<%
} else {
%>
<jsp:include page="error.jsp" />
<%
  }
%>



<head>
  <title>UserPage</title>
  <style>
    .child-tabbar-container {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 220px;
      width: 140px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .tabbar-self {
      height: 64px;
      width: 100%;
      border-bottom-right-radius: 8px;
      border-top-right-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
        border: 1px solid #ccc;
    }
    .tabbar-self img {
      height: 60%;
      transform: translateY(-4%);
    }
    .tabbar-self h1 {
      font-size: 20px;
      margin: 0;
      font-weight: bold;
      color: white;
      user-select: none;
    }
    .chosen-tabbar {
      background-color: #9cb1ea;
      transition: .4s;
      user-select: none;
    }
    .unchosen-tabbar {
      background-color: #b8c3e0;
      transform: translateX(-30%);
      cursor: pointer;
      transition: .4s;
      user-select: none;
    }
    .unchosen-tabbar:hover {
      background-color: #9994e1;
    }
  .all-container{
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
  }
  .logout-btn{
    position: fixed;
    left: 12px;
    top: 8px;
    width: 36px;
    user-select: none;
    cursor: pointer;
    transform: scaleX(-1);
  }
  .tabbar-container{
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 160px;
  }
  .child-router-view{
    position: absolute;
    left: 160px;
    top: 0;
    right: 0;
    bottom: 0;
  }
  .help-manager-container{
    position: fixed;
    left: 12px;
    bottom: 12px;
    width: 240px;
    height: 32px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .help-manager{
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
  }
  .help-manager:hover h1{
    letter-spacing: 8px;
    transition: .4s;
  }
  .help-manager:hover img{
    transform: translateX(-12px);
    transition: .4s;
  }
  .help-manager img{
    height: 80%;
    transition: .4s;
  }
  .help-manager h1{
    font-size: 18px;
    margin-left: 2px;
    margin-bottom: 0;
    color: #444;
    white-space: nowrap;
    transition: .4s;
  }
</style>
</head>
<body>
<jsp:useBean id="timeCorrect" class="com.whu.exp1jsp.javabean.TimeCorrect">

</jsp:useBean>
<div>
  <div class="child-tabbar-container">
    <form action="products-servlet" method="post">
      <input type="hidden" name="mode" value="0">
        <input type="hidden" name="operation" value="getProducts">

      <button type="submit" class="tabbar-self <%= itemButtonClassString%>">
        <img style="<%= itemImageStyle%>" src="assets/tabbar_customer.png" alt="customer">
        <h1>发现好物</h1>
      </button>
    </form>

    <form action="my-servlet" method="post">
      <input type="hidden" name="mode" value="1">

      <button type="submit" class="tabbar-self <%= newItemButtonClassString%>">
      <img style="<%= newItemImageStyle%>" src="assets/tabbar_deliver.png" alt="deliver">
      <h1>我的闲置</h1>
    </button>
    </form>

    <form action="cart-servlet" method="post">
      <input type="hidden" name="mode" value="2">

      <button type="submit" class="tabbar-self <%= cartButtonClassString%>">
      <img style="<%= cartImageStyle%>" src="assets/tabbar_account.png" alt="cart">
      <h1>购物车</h1>
    </button>
    </form>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.15.0/antd.js"></script>



<%
%>

<div class="child-router-view">
<%
  if (mode == 0) {
    %>
    <jsp:include page="userComponents/itemsDisplay.jsp" />
    <%
  } else if (mode == 1) {
    %>
    <jsp:include page="userComponents/newItemPage.jsp" />
    <%
  } else if (mode == 2) {
    %>
    <jsp:include page="userComponents/cartPage.jsp" />
    <%
  } else {
    %>
    <jsp:include page="error.jsp" />
    <%
  }
%>
</div>


</body>
</html>